<!DOCTYPE html>
<html>
    <head>
        <!-- reset the default browser styles -->
        <style>

            .yui3-button-icon {
                background-repeat: no-repeat;
                display: inline-block;
                height: 20px;
                vertical-align: middle;
                width: 20px;
            }

            .yui3-button-icon-bold {
                background-position: 1px -1px;
                background-image: url("icon-sprite-dark-and-light-24.png");
            }

            .yui3-button-icon-italic {
                background-position: 1px -37px;
                background-image: url("icon-sprite-dark-and-light-24.png");
            }

            .yui3-button-icon-underline {
                background-position: 1px -73px;
                background-image: url("icon-sprite-dark-and-light-24.png");
            }

            .yui3-button-icon-follow {
                background-position: -24px 0px;
                background-image:url('http://platform.twitter.com/widgets/images/btn.c5bcc9de085c51bf889f6a8f33128be2.png');
            }
        </style>

        <script src='../../../../build/yui/yui-min.js'></script>

        <script>

            YUI({
                base: '../../../../build/',
                debug: true,
                combo: false,
                filter: 'raw'
            }).use('cssbutton', 'cssfonts', function(Y){

            });
        </script>
    </head>

    <body>

        <h1>Button Example: Icons</h1>

        <button class="yui3-button">
            <span class="yui3-button-icon yui3-button-icon-bold"></span>
        </button>

        <button class="yui3-button">
            <span class="yui3-button-icon yui3-button-icon-bold"></span>
            Bold
        </button>

        <br /><br />

        <button class="yui3-button">
            <span class="yui3-button-icon yui3-button-icon-italic"></span>
        </button>

        <button class="yui3-button">
            <span class="yui3-button-icon yui3-button-icon-italic"></span>
            Italic
        </button>

        <br /><br />

        <button class="yui3-button">
            <span class="yui3-button-icon yui3-button-icon-underline"></span>
        </button>

        <button class="yui3-button">
            <span class="yui3-button-icon yui3-button-icon-underline"></span>
            Underline
        </button>

        <br /><br />

        <a class="yui3-button" href="http://twitter.com/yuilibrary">
            <span class="yui3-button-icon yui3-button-icon-follow"></span>
            Follow @yuilibrary
        </a>


    </body>
</html>
